<template>
  <div class="app-container thesis-home">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1 class="page-title">论文首页（赖佳宜）</h1>
      <p class="page-subtitle">毕业论文管理系统 - 个人展示页面</p>
    </div>

    <!-- 个人信息板块 -->
    <el-card class="info-card" shadow="hover">
      <div slot="header" class="clearfix">
        <span class="card-title">
          <i class="el-icon-user-solid"></i>
          个人信息
        </span>
      </div>
      <el-row :gutter="20">
        <el-col :xs="24" :sm="8" :md="6">
          <div class="avatar-section">
            <el-avatar :size="120" :src="userInfo.avatar" class="user-avatar">
              {{ userInfo.name ? userInfo.name.charAt(0) : '赖' }}
            </el-avatar>
            <div class="avatar-info">
              <h3>{{ userInfo.name }}</h3>
              <p class="user-title">{{ userInfo.title }}</p>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="16" :md="18">
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="info-item">
                <label>学号：</label>
                <span>{{ userInfo.studentId }}</span>
              </div>
              <div class="info-item">
                <label>专业：</label>
                <span>{{ userInfo.major }}</span>
              </div>
              <div class="info-item">
                <label>学院：</label>
                <span>{{ userInfo.college }}</span>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="info-item">
                <label>联系电话：</label>
                <span>{{ userInfo.phone }}</span>
              </div>
              <div class="info-item">
                <label>邮箱：</label>
                <span>{{ userInfo.email }}</span>
              </div>
              <div class="info-item">
                <label>指导老师：</label>
                <span>{{ userInfo.advisor }}</span>
              </div>
            </el-col>
          </el-row>
          <div class="introduction">
            <h4>个人简介</h4>
            <p>{{ userInfo.introduction }}</p>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 毕业论文基本信息展示区 -->
    <el-card class="thesis-basic-card" shadow="hover">
      <div slot="header" class="clearfix">
        <span class="card-title">
          <i class="el-icon-document"></i>
          毕业论文基本信息
        </span>
      </div>
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="thesis-info-item">
            <label>论文题目：</label>
            <span class="thesis-title">{{ thesisInfo.title }}</span>
          </div>
          <div class="thesis-info-item">
            <label>研究方向：</label>
            <span>{{ thesisInfo.researchField }}</span>
          </div>
          <div class="thesis-info-item">
            <label>论文类型：</label>
            <span>{{ thesisInfo.type }}</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="thesis-info-item">
            <label>开题时间：</label>
            <span>{{ thesisInfo.startDate }}</span>
          </div>
          <div class="thesis-info-item">
            <label>预计完成时间：</label>
            <span>{{ thesisInfo.expectedDate }}</span>
          </div>
          <div class="thesis-info-item">
            <label>当前进度：</label>
            <el-progress :percentage="thesisInfo.progress" :color="customColors"></el-progress>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="thesis-info-item">
            <label>论文状态：</label>
            <el-tag :type="thesisInfo.status === '进行中' ? 'success' : thesisInfo.status === '已完成' ? 'primary' : 'warning'">
              {{ thesisInfo.status }}
            </el-tag>
          </div>
          <div class="thesis-info-item">
            <label>关键词：</label>
            <div class="keywords">
              <el-tag v-for="(keyword, index) in thesisInfo.keywords" :key="index" size="small">
                {{ keyword }}
              </el-tag>
            </div>
          </div>
        </el-col>
      </el-row>
      <div class="abstract-section">
        <h4>论文摘要</h4>
        <p>{{ thesisInfo.abstract }}</p>
      </div>
    </el-card>

    <!-- 论文成果展示区 -->
    <el-card class="achievement-card" shadow="hover">
      <div slot="header" class="clearfix">
        <span class="card-title">
          <i class="el-icon-trophy"></i>
          论文成果展示
        </span>
      </div>
      <el-tabs v-model="activeAchievementTab" type="card">
        <el-tab-pane label="研究成果" name="research">
          <div class="achievement-content">
            <h4>主要研究成果</h4>
            <ul>
              <li v-for="(item, index) in achievements.research" :key="index">
                {{ item }}
              </li>
            </ul>
          </div>
        </el-tab-pane>
        <el-tab-pane label="发表论文" name="papers">
          <div class="achievement-content">
            <h4>已发表论文</h4>
            <ul>
              <li v-for="(item, index) in achievements.papers" :key="index">
                {{ item }}
              </li>
            </ul>
          </div>
        </el-tab-pane>
        <el-tab-pane label="专利成果" name="patents">
          <div class="achievement-content">
            <h4>专利成果</h4>
            <ul>
              <li v-for="(item, index) in achievements.patents" :key="index">
                {{ item }}
              </li>
            </ul>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- 快速导航 -->
    <el-card class="quick-nav-card" shadow="hover">
      <div slot="header" class="clearfix">
        <span class="card-title">
          <i class="el-icon-s-promotion"></i>
          快速导航
        </span>
      </div>
      <el-row :gutter="20">
        <el-col :xs="12" :sm="6" :md="3" v-for="(nav, index) in quickNavs" :key="index">
          <div class="nav-item" @click="handleNavClick(nav.path)">
            <div class="nav-icon">
              <i :class="nav.icon"></i>
            </div>
            <div class="nav-label">{{ nav.label }}</div>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "ThesisLaiJiaYi",
  data() {
    return {
      // 当前激活的成果标签页
      activeAchievementTab: 'research',
      
      // 自定义进度条颜色
      customColors: [
        { color: '#f56c6c', percentage: 20 },
        { color: '#e6a23c', percentage: 40 },
        { color: '#5cb87a', percentage: 60 },
        { color: '#1989fa', percentage: 80 },
        { color: '#6f7ad3', percentage: 100 }
      ],
      
      // 用户信息
      userInfo: {
        name: '赖佳宜',
        studentId: '116420220028',
        major: '数据科学与大数据技术',
        college: '工程技术学院',
        phone: '138****9012',
        email: 'laijiayi@example.com',
        advisor: '张展老师',
        title: '本科生',
        avatar: '',
        introduction: '专注于数据可视化与交互设计研究，具备良好的前端开发能力和用户体验设计思维。在校期间参与多个数据可视化项目，对大数据分析和可视化展示有深入研究。'
      },
      
      // 论文信息
      thesisInfo: {
        title: '基于WebGL的大规模数据可视化系统设计与实现',
        researchField: '数据可视化与交互设计',
        type: '毕业设计',
        startDate: '2024-09-15',
        expectedDate: '2025-06-30',
        progress: 65,
        status: '进行中',
        keywords: ['数据可视化', 'WebGL', '交互设计', '大数据'],
        abstract: '本研究设计并实现了一个基于WebGL的大规模数据可视化系统，通过优化渲染算法和交互设计，提高大数据可视化的性能和用户体验。研究成果可为数据分析平台提供可视化支持。'
      },
      
      // 成果信息
      achievements: {
        research: [
          '开发WebGL数据可视化引擎',
          '设计交互式可视化界面',
          '发表相关研究论文1篇',
          '参与企业数据可视化项目'
        ],
        papers: [
          '基于WebGL的大规模数据可视化技术研究，计算机图形学学报，2024'
        ],
        patents: [
          '数据可视化系统（软件著作权）'
        ]
      },
      
      // 快速导航
      quickNavs: [
        { label: '学生信息', icon: 'el-icon-user', path: '/student' },
        { label: '论文管理', icon: 'el-icon-document', path: '/thesis' },
        { label: '成果展示', icon: 'el-icon-trophy', path: '/achievement' },
        { label: '文档下载', icon: 'el-icon-download', path: '/download' },
        { label: '进度跟踪', icon: 'el-icon-data-line', path: '/progress' },
        { label: '系统设置', icon: 'el-icon-setting', path: '/system' },
        { label: '帮助中心', icon: 'el-icon-question', path: '/help' },
        { label: '联系我们', icon: 'el-icon-phone', path: '/contact' }
      ]
    }
  },
  
  methods: {
    // 处理导航点击
    handleNavClick(path) {
      if (path) {
        this.$router.push(path)
      }
    }
  }
}
</script>

<style scoped>
.thesis-home {
  padding: 20px;
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
  padding: 20px 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 8px;
  color: white;
}

.page-title {
  font-size: 2.5rem;
  margin-bottom: 10px;
  font-weight: 600;
}

.page-subtitle {
  font-size: 1.2rem;
  opacity: 0.9;
}

.info-card, .thesis-basic-card, .achievement-card, .quick-nav-card {
  margin-bottom: 20px;
}

.card-title {
  font-size: 1.2rem;
  font-weight: 600;
}

.avatar-section {
  text-align: center;
}

.user-avatar {
  margin-bottom: 10px;
}

.avatar-info h3 {
  margin: 10px 0 5px 0;
  font-size: 1.3rem;
}

.user-title {
  color: #666;
  font-size: 0.9rem;
}

.info-item {
  margin-bottom: 15px;
}

.info-item label {
  font-weight: 600;
  color: #333;
  margin-right: 10px;
}

.introduction {
  margin-top: 20px;
}

.introduction h4 {
  margin-bottom: 10px;
  color: #333;
}

.thesis-info-item {
  margin-bottom: 15px;
}

.thesis-title {
  font-weight: 600;
  color: #1890ff;
}

.keywords {
  margin-top: 5px;
}

.keywords .el-tag {
  margin-right: 5px;
  margin-bottom: 5px;
}

.abstract-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.achievement-content ul {
  padding-left: 20px;
}

.achievement-content li {
  margin-bottom: 8px;
  line-height: 1.6;
}

.nav-item {
  text-align: center;
  padding: 15px 0;
  cursor: pointer;
  transition: all 0.3s;
  border-radius: 8px;
}

.nav-item:hover {
  background-color: #f5f7fa;
  transform: translateY(-2px);
}

.nav-icon {
  font-size: 2rem;
  color: #409eff;
  margin-bottom: 10px;
}

.nav-label {
  font-size: 0.9rem;
  color: #666;
}
</style>